<script lang="ts" setup>
// @ts-ignore
import {getAllCategories, getArticlesByCategoryId} from "~/server/category.service";
// @ts-ignore
import {getArticles} from "~/server/article.service";
// @ts-ignore
import {ArticlePath} from "~/config/SystemConfig";

definePageMeta({
    layout: false,
})
useHead({
    bodyAttrs: {
        class: 'archive category category-word'
    }
})
const categoryTitle = ref('壹些文字')
const categoryDesc = ref('所谓旁观者清，也有站着说话不腰疼的意思。')
const categoryList = ref('' as any)
const pagination = reactive({
    size: 12,
    total: 0,
    current: 1
})
const articlesList = ref('' as any)
const count = ref(0)
const route = useRoute()
function getCategoryList() {
    getAllCategories().then(({data}: any) => {
        categoryList.value = data.data
    })
}
function fetchArticles() {
    const params = {current: pagination.current, size: pagination.size}
    getArticles(params).then(({data}: any)=>{
        articlesList.value = data.data.records
        count.value = data.data.count
    })
}
function handleTabChange(categoryId: any) {
    if (categoryId === 0) {
        fetchArticles()
    }else {
        const params = {current: pagination.current, size: pagination.size, categoryId: categoryId}
        getArticlesByCategoryId(params).then(({data}: any) => {
            articlesList.value = data.data.records
            count.value = data.data.count
        })
    }
}
function nextPage() {
    if (pagination.current * pagination.size > count.value){
        ElMessage.warning('暂无更多说说')
        return
    }
    pagination.current = pagination.current + 1
    fetchArticles()
}
function initPage() {
    if (route.params.id == undefined){
        fetchArticles()
    }else {
        handleTabChange(route.query.query)
    }
}
onMounted(() => {
    getCategoryList()
    initPage()
})
</script>
<template>
    <NuxtLayout name="grid">
        <template v-slot:nav>
            <Nav :title="categoryDesc"/>
        </template>
        <template v-slot:main>
            <PageHeader :title="categoryTitle" :desc="categoryDesc">
                <template v-slot:other>
                    <nav class="taxonomy-nav fade-before fade-after">
                        <ul class="taxonomy-sub no-scrollbar">
                            <template v-for="item in categoryList">
                                <li :class="'cat-item cat-item-'+item.id">
                                    <a @click='handleTabChange(item.id)'>{{ item.categoryName }}</a>
                                </li>
                            </template>
                        </ul>
                    </nav>
                </template>
            </PageHeader>
            <div class="post_box word word">
                <template v-for="post in articlesList">
                    <article class="entry-preview post status-publish hentry fade-before fade-after">
                        <div class="thumbnail_box">
                            <a class="thumbnail" :href='ArticlePath.Path+post.id' rel="bookmark">
                                <img :src='post.articleCover'
                                     :href="post.articleCover"
                                     class="attachment-post-thumbnail size-post-thumbnail loaded" alt=""
                                     loading="lazy" data-fancybox="gallery">
                            </a>
                        </div>
                        <div class="entry-thyuupost">
                            <header class="entry-header">
                                <time class="post-time" datetime="2024-03-31T19:16:30+08:00">
                                    {{ timeAgo(new Date(post.createTime)) }}
                                </time>
                                <h6 class="entry-title">
                                    <a :href='ArticlePath.Path+post.id' rel="bookmark">
                                        {{ post.articleTitle }}
                                    </a>
                                </h6>
                            </header>
                            <footer class="post-meta">
                                <div class="post-mark">
                                <span class="tag">
                                    <a href="#main" rel="category tag">{{ post.categoryName }}</a>
                                </span>
                                <span class="tag-list">
                                    <template v-for='tag in post.tags'>
                                        <a href="#main" rel="tag">{{ tag.tagName }}</a>
                                    </template>
                                </span>
                                </div>
                            </footer>
                        </div>
                    </article>
                </template>
            </div>
            <nav class="navigation page-navigation has-thyuu-color has-btn-effect">
                <div class="nav-next">
                    <a href="#main" @click="nextPage">
                        <span class="btn-meta">下一页</span>
                    </a>
                </div>
            </nav>
        </template>
    </NuxtLayout>
</template>
<style scoped>

</style>
